<template>
  <fs-page>
    <fs-crud ref="crudRef" v-bind="crudBinding">
      <template #toolbar-left>
        <el-button type="danger" @click="handleBatchDelete" :icon="Delete">批量删除</el-button>
      </template>
    </fs-crud>
  </fs-page>
</template>

<script lang="ts" setup>
import { Delete } from '@element-plus/icons-vue'
import { useFs, useFsRef } from '@fast-crud/fast-crud'
import createCrudOptions from './crud'
import { batchDelete } from './api'
const { crudRef, crudBinding, context, crudExpose } = useFsRef()
//同步初始化crud
useFs({ crudRef, crudBinding, context, crudExpose, createCrudOptions })
const { selectedIds } = context

const handleBatchDelete = async () => {
  if (selectedIds.value?.length > 0) {
    await ElMessageBox.confirm(`确定要批量删除这${selectedIds.value.length}条记录吗`, '确认')
    await batchDelete({ ids: selectedIds.value })
    ElMessage.info('删除成功')
    selectedIds.value = []
    await crudExpose.doRefresh()
  } else {
    ElMessage.error('请先勾选记录')
  }
}

onMounted(async () => {
  crudExpose.doRefresh()
})
</script>
